<template>
  <el-space>
    <span>{{ scope?.column?.label }}</span>

    <el-popover placement="bottom" :width="250" trigger="click" ref="popoverRef">
      <template #reference>
        <el-button text size="small" :icon="Filter" circle />
      </template>

      <template #default>
        <el-input
          v-bind="option"
          v-model="value"
          placeholder="请输入"
          clearable
          style="width: 100%; box-sizing: border-box"
        />
        <div class="flex justify-end mt-2">
          <el-space>
            <el-button type="default" size="small" @click="handleReset()">重置</el-button>
            <el-button type="primary" size="small" @click="handleQuery()">查询</el-button>
          </el-space>
        </div>
      </template>
    </el-popover>
  </el-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Filter } from '@element-plus/icons-vue'

defineOptions({
  name: 'InputFilter'
})

defineProps<{
  scope: {
    type: Object
  }
  option: {
    type: Object
  }
}>()

const emit = defineEmits(['query', 'reset'])

const value = ref(null)
const popoverRef = ref(null)

const handleQuery = () => {
  emit('query', value.value)
  popoverRef.value?.hide()
}

const handleReset = () => {
  value.value = null
  emit('reset', '')
}
</script>
